<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)

const { x, y, style } = useDraggable(el, {
  initialValue: { x: 80, y: 80 },
  preventDefault: true,
  exact: true,
})
</script>

<template>
  <div
    ref="el"
    class=" bg-pink-200"
    :style="style"
    style="position: absolute; width: 300px; height: 250px; border: 2px dotted #ccc; cursor: move"
  >
    👋 Drag me!
    <div>I am at {{ Math.round(x) }}, {{ Math.round(y) }}</div>
  </div>
</template>
